<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件基础</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/animate.css">
    <style>
        td {
            border: 1px solid #ddd;
            margin: 10px;
            padding: 25px;
            background: orchid;
            text-align: center;
        }

        ul {
            display: flex;
            list-style: none;
            padding: 0;
        }

        li {
            background: yellowgreen;
            padding: 20px;
        }

        li p {
            margin: 15px;
            padding: 20px;
        }

        .zoom-enter-active {
            animation: zoomInDown 1.2s;
        }

        .zoom-leave-active {
            animation: zoomOutDown 1.2s;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2 ref="one">{{ title }}</h2>
        <my-head id="2309" :num="1000"></my-head>
        <Home :title="title" :count="count"></Home>
        <Home :title="title" :count="count">
            <div>
                <h2>Hello wh2309</h2>
                <h2>Hello wh2309</h2>
                <h2>Hello wh2309</h2>
            </div>
        </Home>

        <Home :title="title" :count="count">
            <div>
                <h2>wh2309</h2>
            </div>
            <div>
                <h2>wh2309</h2>
            </div>
            <div>
                <h2>wh2309</h2>
            </div>
            <template v-slot:nav>
                <div>
                    <h2>wh2309 111</h2>
                </div>
            </template>
        </Home>

        <mybox>
            <div>
                <h2>Hello Happy EveryOne</h2>
            </div>

            <template v-slot:left>
                <div>
                    <h2>这是左边的侧边栏</h2>
                </div>
            </template>
            <template #right>
                <div>
                    <h2>这是右边的侧边栏</h2>
                </div>
            </template>
        </mybox>
    </div>

    <template id="home">
        <div style="border:1px solid darkolivegreen;margin:15px;">
            <h2>Home - HOme - Home</h2>
            <h4>props == {{count}} -- {{title}}</h4>
            <slot>模板或者Html页面通过插槽slot接收(这是默认显示的)</slot>
            <slot name="nav">这是一个具名插槽 只能接受指定的内容分发</slot>
        </div>
    </template>

    <template id="mybox">
        <div>
            <h2>MyBox - MyBox - 1</h2>
            <div>
                <slot>这是匿名插槽 - slot</slot>
            </div>
            <div>
                <slot name="left"></slot>
            </div>
            <div>
                <slot name="right">右边的内容</slot>
            </div>
        </div>
    </template>


    <script>
        const bus = new Vue()   // 空折Vue实例对象 事件总线
        Vue.component('my-head', {
            template: '<h2>Head - Head - 自定义头部</h2>'
        })
        Vue.component('Home', {
            template: '#home',
            props: ['title','count']
        })
        Vue.component('mybox',{
            template:"#mybox"
        })

        const vm = new Vue({
            el: "#app",
            data: {
                title: '组件插槽 - slot',
                count: 2000
            },
            mounted() {
                this.$refs.one.style.color = 'red'
                this.$refs.one.style.fontSize = '20px'
            }
        })
    </script>
    <!-- 
        插槽 slot (接收内容分发的数据 )
        Vue 实现了一套内容分发的 API slot  将 <slot> 元素作为承载分发内容的出口
        插槽  slot 专门接受 从父组件传递来的 (props+slot ) html模板 (包括组件)  内容分发 


        父组件给子组件传递数据  props 
        父组件 想给子组件 传递 模板(html标签)   用 slot 来接受 内容分发 模块 
        slot 父组件可以把模板标签(html) 动态分发子组件  子组件放到指定的 位置区域 (slot 插槽)

        父组件可以把模板或者组件通过内容分发的格式传递给子组件  子组件通过slot 接收


        传递数据用 props 接受
        传递 模板片段 用 slot （插槽） 接受

        匿名插槽   

        具名插槽 slot  精准投放  定位   name="a"
        template v-slot=  "a"
        name="menu"  v-slot:menu   #menu 
        
        作用域插槽  把子组件的数据通过插槽传递给父组件 由父组件决定显示什么数据      

        以后封装组件   props 70%  slot 30%
        
        v-slot = # 
     -->

</body>

</html>